<template>
	<view class="bg-F5F5F5">
		<view style="margin-bottom: 22rpx;">
			<u-tabs-swiper inactive-color="#111111" font-size="26" active-color="#DFB982" ref="uTabs" :list="list"
				:current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!-- :style="{   height: windowHeight + 'px' }" -->
		<swiper :style="{   height: windowHeight-40 + 'px' }" :current="swiperCurrent"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom">
					<view class="bg-FFFFFF">
						<view class="px-20 bg-FFFFFF py-20 just-between" style=" " @click.self="daihexiao(0)">
							<view class="flex f-28 c-AAAAAA">
								<view class="f-28 c-AAAAAA">
									订单编号:
								</view>
								<view class="">
									46535132154654654321465
								</view>
							</view>
							<view class="c-FFD153">
								待付款
							</view>

						</view>
						<view class="" style=" border-bottom: 1rpx solid #AAAAAA;width: 750rpx;">

						</view>
						<view class="px-20 flex py-20 bg-FFFFFF   align-center">
							<view class="b-1F51A6" style="width: 150rpx;height: 150rpx;;">

							</view>
							<view class="ml-20">
								<view class="">
									iphone xs max2021
								</view>
								<view class="f-24 c-AAAAAA mt-10 mb-13">
									数量:1;
								</view>
								<view class="">
									￥0.01
								</view>
							</view>
						</view>
						<view class="" style=" border-bottom: 1rpx solid #AAAAAA;width: 750rpx;">

						</view>
						<view class="mt-20 bg-FFFFFF mr-10" style="display: flex; justify-content: flex-end;">
							<view class="flex f-24 c-AAAAAA">
								<view class="">
									<text>优惠:</text>
									<text>￥0.00,</text>

								</view>
								<view class="">
									<text>运费:</text>
									<text>￥0.00,</text>

								</view>
								<view class="">
									<text>需付款:</text>
									<text>￥0.01</text>

								</view>
							</view>
						</view>
						<view class="mt-10 bg-FFFFFF mr-10 aj-center" style="display: flex; justify-content: flex-end;padding-bottom: 15rpx;">
							<view class="flex">
								<view class="mr-20" style="width: 44rpx;height: 44rpx;" @click="addliwu">
									<image src="../static/doct/lieu.png" mode=""></image>
								</view>
								<view class="aj-center bor-r18 mr-10 bg-F5F5F5 px-20 py-10">
									取消订单
								</view>
								<view class="bg-DFB982 bor-r18 px-20 py-10 aj-center">
									立即支付
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</swiper-item>

		</swiper>

		<u-mask :show="show">
			<view class="aj-center" style="height: 900rpx;  position: relative;   margin-top: 149rpx; ">
				<view class="" style="width: 600rpx;height: 900rpx;position: absolute;  margin: auto;   ">
					<image src="../static/doct/manghe.png" mode=""></image>
				</view>
				<view class="" v-if="openhezibool" @click="openhezi"
					style="position: absolute;width: 216rpx;height: 214rpx;top: 56%;">
					<image src="../static/doct/hezi.png" mode=""></image>
				</view>
				<view class="bor-r10 flex" v-if="!openhezibool" @click="openhezi" style="position: absolute;width: 432rpx;top: 56%;
				 padding-top: 32rpx;padding-left: 22rpx;padding-bottom: 32rpx;
				 background: #FFFFFF;
				 border: 1px solid #707070;
				 opacity: 0.82;
				 ">
					<view class="b-1F51A6 mr-14" style="width: 149rpx;height: 149rpx;opacity:1;">

					</view>
					<view class="">
						<view class="c-11 f-26 fw-400">
							XXXXX商品XXXX名
							称
						</view>
						<view class="f-28 c-EE1B1B mt-12" style="text-decoration:line-through">
							￥100.00
						</view>
					</view>
				</view>
				<view v-if="!openhezibool"  class="mt-21 c-FFFFFF fw-400 f-28" style="position: absolute;bottom: 131rpx;">
					剩余领取时间 00 : 05 : 06
				</view>
				<view v-if="!openhezibool" class="just-between c-FFFFFF fw-400 fs-32" style="bottom: 26rpx; position: absolute;padding-left: 55rpx;padding-right: 55rpx;    bottom: 26rpx;">
					<view @click="show=false" class="bor-r10 c-11 aj-center" style="margin-right: 90rpx; width: 200rpx; height: 80rpx; background: #FFFFFF;">
						暂不领取
					</view>
					<view @click="show=false" class="bor-r10 aj-center" style="width: 200rpx; height: 80rpx; background: #F6A345;">
						加入购物车
					</view>
				</view>

			</view>
			<view class="" @click="show=false"
				style="width: 63rpx;height: 63rpx;margin: auto;top: 76%; margin-top: 54rpx ">
				<image src="../static/doct/close.png" mode=""></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 674,
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}],
				tabs: ['10', '20', '30'],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				load: false,
				show: false,
				openhezibool: true,
			}
		},

		onShow() {
			const info = uni.getSystemInfoSync();
			console.log(info);
			this.windowHeight = info.windowHeight;
		},
		methods: {
			openhezi() {
				this.openhezibool = !this.openhezibool;
			},
			addliwu() {
				this.show = true;
				this.openhezibool = true
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index;
				this.load = false;
			},

			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
				this.load = false;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.load = true;
				console.log('触发加载')
			},
			// details(id) {
			// 	uni.navigateTo({
			// 		url: '/goodsPage/shoopDetails/shoopDetails?id=' + id
			// 	})
			// },
			daihexiao(id) {
				console.log(id)
				uni.navigateTo({
					url: '/goodsPage/IndentDoctDetail/IndentDoctDetail?id=' + id
				})
			}
		}
	}
</script>

<style scoped>
	@import url("@/common/css/fress.css");
	@import url("@/common/css/mycss.css");

	.h {
		/* height: calc(); */
	}
</style>
